<template>
  <div class="box">
    <div class="logo" @click="$router.push('/home')">
      <img class="topImg" src="@/assets/image/header/logo.png" alt="" />
    </div>

    <div class="medium">
      <div class="nameBox">你好,{{ userData ? userData.username : "" }}</div>
      <div>
        <span
          v-if="token"
          style="
            color: #e22a1f;
            font-size: 0.16rem;
            font-weight: 500;
            cursor: pointer;
            margin-left: 0.15rem;
            font-family: PingFang SC;
            line-height: 0.12rem;
          "
          @click="quit"
          >退出</span
        >
        <span
          v-else
          style="
            color: #e22a1f;
            font-size: 0.16rem;
            font-weight: 500;
            cursor: pointer;
            margin-left: 0.15rem;
            font-family: PingFang SC;
            line-height: 0.12rem;
          "
          @click="login"
          >请登录</span
        >
      </div>
      <div class="zxdh">咨询电话：0556-8858852</div>
    </div>

    <div class="right">
      <div @click="$router.push('/home')">童装网首页</div>
      <div @click="toUser('/ShoppingCart')">购物车</div>
      <div>找货源</div>
      <div>找商家</div>
      <div   @click="
            $router.push({
              path: '/HelpCenter',
              query: {
                index: 0,
              },
            })
          ">联系我们</div>
      <div    @click="
            $router.push({
              path: '/HelpCenter',
              query: {
                index: 1,
              },
            })
          ">帮助中心</div>
      <div    @click="
            $router.push({
              path: '/enroll',
              query: {
                index: 1,
              },
            })
          ">商家入驻</div>
    </div>
  </div>
</template>

<script>
import { getUserData } from '@/api/user'
import { getToken, removeToken } from '@/utils/auth'
export default {
  data () {
    return {
      userData: {},
      token: null
    }
  },
  created () {
    this.token = getToken()
    this.getUserData()
  },
  methods: {
    toUser (url) {
      const token = getToken()
      if (token) {
        window.localStorage.setItem('type', this.userData.havestore)
        this.$router.push({
          path: url
        })
      } else {
        this.$message({
          message: '请先登陆！',
          type: 'warning'
        })
        this.$router.push('/login')
      }
    },
    login () {
      this.$router.push('/login')
    },
    // 退出登陆
    quit () {
      removeToken()
      this.$router.push('/login')
    },
    // 获取个人信息
    getUserData () {
      getUserData().then((data) => {
        this.userData = data.data
        console.log(this.userData)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  margin: 0 auto;
  width: 14.2rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .logo {
    font-size: 0.16rem;
    color: #e22a1f;
    .topImg {
      cursor: pointer;
      width: 1.2rem;
    }
  }
  .medium {
    width: 4.4rem;
    font-size: 0.16rem;
    color: #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .right {
    cursor: pointer;
    width: 5.9rem;
    font-size: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999999;
    div {
      padding: 0 0.1rem;
      border-right: 1px solid #e8e8e8;
    }
    div:last-child {
      border-right: none;
    }
  }
}
</style>
<style scoped lang="scss">
// @media screen and (max-width: 1300px) {
//   .box {
//     margin: 0 auto;
//     width: 90%;
//     height: 100%;
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     .logo {
//       font-size: 0.16rem;
//       color: #e22a1f;
//     }
//     .medium {
//       width: 5.4rem;
//       font-size: 0.12rem;
//       color: #333333;
//       display: flex;
//       // justify-content: space-between;
//       align-items: center;
//       justify-content: flex-start;
//       .nameBox {
//         margin-right: 20px;
//       }
//       .tuichuBox {
//         margin-right: 20px;
//       }
//       .zxdh {
//         margin-left: 20px;
//       }
//     }
//     .right {
//       cursor: pointer;
//       width: 6.9rem;
//       font-size: 0.12rem;
//       display: flex;
//       justify-content: space-between;
//       align-items: center;
//       color: #999999;
//       div {
//         padding: 0 0.1rem;
//         border-right: 1px solid #e8e8e8;
//       }
//       div:last-child {
//         border-right: none;
//       }
//     }
//   }
// }
</style>
